<template>
    <div class="company">
        <el-form ref="company" :model="company" :rules="companyRules" size="small" label-width="125px">
            <el-form-item prop="auth_name" label="企业全称">
                <el-input v-model="company.auth_name" placeholder="与企业营业执照名称一致"></el-input>
            </el-form-item>
            <el-form-item prop="id_number" label="营业执照注册号">
                <el-input v-model="company.id_number"></el-input>
            </el-form-item>
            <el-form-item prop="id_pic" label="工商营业执照" class="avatar-position">
                <el-upload class="avatar-uploader" 
                :action="uploadUrl"
                :show-file-list="false" 
                :on-success="companySuccess"
                :before-upload="companyUpload">
                    <img v-if="id_pic" :src="id_pic" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div class="tips">请上传最新企业营业执照原件照片、彩色扫描件，支持.jpg、.png、.jpeg格式，大小不超过5M</div>
                <div class="sample">
                    <div class="title">上传样例</div>
                    <div class="pic">
                        <img :src="sample" />
                    </div>
                </div>
            </el-form-item>
            <el-form-item prop="account_bank" label="开户银行">
                <el-input v-model="company.account_bank"></el-input>
            </el-form-item>
            <el-form-item label="开户行所在地">
                <el-row class="address">
                        <el-col :span="8">
                            <el-form-item prop="region" style="margin-bottom: 0;">
                                <el-select v-model="company.region" placeholder="请输入省" @change="regionChange">
                                    <el-option v-for="item in regions" :key="item.value" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" style="padding-left: 10px;">
                            <el-form-item prop="city" style="margin-bottom: 0;">
                                <el-select v-model="company.city" placeholder="请输入市">
                                    <el-option v-for="item in citys" :key="item.value" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
            </el-form-item>
            <el-form-item prop="account_name" label="银行开户名称">
                <el-input v-model="company.account_name"></el-input>
            </el-form-item>
            <el-form-item prop="account_number" label="对公银行账号">
                <el-input v-model="company.account_number"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="setCompany('company')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { identityAdd,submitfile } from "@/api";
import { mapState, mapMutations } from "vuex";
import addressData from "@/assets/js/addressData.js"; // 地址

function formatData(data) {
    var result = [];
    for (var key in data) {
        result.push({
            value: key
        });
    }
    return result;
}
export default {
    data() {
        return {
            uploadUrl: submitfile,
            user_id: null,
            sample: require('../../assets/sample.png'),
            company: {
                auth_name: '',
                id_number: '',
                account_bank: '',
                account_number: '',
                account_name: '',
                region: '',
                city: '',
                id_pic: [],
            },
            companyRules: {
                auth_name: [{ required: true, message: "请填写企业全称" }],
                id_number: [{ required: true, message: "请填写营业执照注册号" }],
                account_bank: [{ required: true, message: "请填写开户银行" }],
                account_number: [{ required: true, message: "请填写对公银行账号" }],
                account_name: [{ required: true, message: "请填写银行开户名称" }],
                region: [{ required: true, message: "请选择开户行省份", trigger: 'change' }],
                city: [{ required: true, message: "请选择开户行城市", trigger: 'change' }],
                id_pic: [{ required: true, message: "请上传工商营业执照" }],
            },
            regions: formatData(addressData), // 省份
            region_old: '',
            id_pic:'',
        };
    },
    mounted() {
        this.user_id = this.croUser.user_id || null;
        // this.getRESDATA();
    },
    computed: {
        citys: function() {
            return formatData(addressData[this.company.region]);
        },
        ...mapState(["croUser"])
    },
    methods: {
        ...mapMutations(["OUT_LOGIN"]),
        // campany
        companySuccess(res, file) {
            this.id_pic = URL.createObjectURL(file.raw);
            this.company.id_pic[0] = file.response.data;
        },
        companyUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
        
        // 创作完成地点地址联动
        regionChange: function(val) {
            if (this.region_old != val && this.region_old != "") {
                this.company.city = "";
            }
            this.region_old = val; // oldVal
            var data = formatData(addressData[this.company.region]);
            for (var i = 0; i < data.length; i++) {
                this.$set(this.citys, i, data[i]);
            }
        },
		setCompany(formName){
			if(!this.croUser){
				this.OUT_LOGIN();
				this.$router.push('/login');
				return
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let para = Object.assign({}, this.company);
                    para.user_id=this.user_id;
                    para.auth_type=2;
                    identityAdd(para).then(res=>{
                        if(res.data){
                            this.$emit('refresh');
                        }else if(res.tologin) {
                            this.OUT_LOGIN();
                            this.$router.push('/login');
                        }else {
                            this.$message.error(res.msg);
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
		},
    }
};
</script>
<style scoped lang="scss">
</style>
